<template lang="html">
  <div class="main">
    <div class="left-menu">
      <h2>学生中心</h2>
      <el-menu
       :default-active="defaultActive"
        @select="selectItem"
        class="el-menu-vertical-demo"
      >
        <el-menu-item index="exam">
          <i class="el-icon-edit-outline"></i>
          <span slot="title">题库模拟</span>
        </el-menu-item>

         <el-menu-item index="download">
          <i class="el-icon-document"></i>
          <span slot="title">模拟详情</span>
        </el-menu-item>

        <el-menu-item index="examInfo">
          <i class="el-icon-edit"></i>
          <span slot="title">我的考试</span>
        </el-menu-item>

        <el-menu-item index="examDetails">
          <i class="el-icon-document"></i>
          <span slot="title">考试详情</span>
        </el-menu-item>

        <el-menu-item index="myInfomation">
          <i class="el-icon-user-solid"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>个人中心</span>
          </template>
          <el-menu-item index="changePassword">修改密码</el-menu-item>
          <el-menu-item index="changeAvatar">更换头像</el-menu-item>
          <el-menu-item index="completeInfo">{{$store.state.studentInfomation?'考试须知':'完善个人信息'}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right-box">
      <div class="top-bar clearfix">
        <el-dropdown class="f-r" @command="handleCommand">
          <el-button type="text" class="user-menu">
            <el-avatar :src="src"></el-avatar>
            <i class="el-icon-user"></i>
            {{$store.state.userName}}
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="exit">退出</el-dropdown-item>
            <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item command="changeAvatar">更换头像</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="content">
        <!-- 给子路由预留位置 -->
        <router-view :exit="exit"></router-view>
        <!-- 传递函数exit给子路由(子组件使用)子组件changePassword在父div使用:exit="exit"
        再使用props["exit"]接收 -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      userName: "",
      src: "",
      defaultActive: "",
    };
  },
  methods: {
    //退出登录操作
    exit() {
      axios
        .get("/v1/users/logout")
        .then((result) => {
          console.log(result);
        })
        .catch((err) => {
          console.log(err);
        });
      localStorage.clear(); //清除全部
      // localStorage.removeItem('username')

      //清除cookie
      function clearCookie() {
        var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
        if (keys) {
          for (var i = keys.length; i--; ) {
            document.cookie =
              keys[i] + "=0;path=/;expires=" + new Date(0).toUTCString(); //清除当前域名下的,例如：m.kevis.com
            document.cookie =
              keys[i] +
              "=0;path=/;domain=" +
              document.domain +
              ";expires=" +
              new Date(0).toUTCString(); //清除当前域名下的，例如 .m.kevis.com
            document.cookie =
              keys[i] +
              "=0;path=/;domain=kevis.com;expires=" +
              new Date(0).toUTCString(); //清除一级域名下的或指定的，例如 .kevis.com
          }
        }
      }
      clearCookie();

      this.$router.push("/");
    },
    handleCommand(command) {
      //element 下拉菜单指令事件 Dropdown Events
      //command	点击菜单项触发的事件回调	dropdown-item 的指令
      //退出登录
      if (command == "exit") {
        this.exit();
      } else if (
        command == "changePassword" &&
        this.$route.path != "/studentHome/changePassword"
      ) {
        this.$router.push("/studentHome/changePassword");
      } else if (
        command == "changeAvatar" &&
        this.$route.path != "/studentHome/changeAvatar"
      ) {
        this.$router.push("/studentHome/changeAvatar");
      }
    },
    //element menu select事件 菜单激活回调	index: 选中菜单项的 index,
    //indexPath: 选中菜单项的 index path
    selectItem(index) {
      if (index == "exam" && this.$route.path != "/studentHome/exam") {
        //点击在线考试
        this.$router.push(`/studentHome/exam`);
      } else if (
        index == "changePassword" &&
        this.$route.path != "/studentHome/changePassword"
      ) {
        this.$router.push("/studentHome/changePassword");
      } else if (
        index == "changeAvatar" &&
        this.$route.path != "/studentHome/changeAvatar"
      ) {
        this.$router.push("/studentHome/changeAvatar");
      } else if(index =="completeInfo"&&
        this.$route.path != "/studentHome/homepage"){
        this.$router.push("/studentHome/homepage");
      }
      else if (
        index == "download" &&
        this.$route.path != "/studentHome/download"
      ) {
        this.$router.push("/studentHome/download");
      } else if (
        index == "examInfo" &&
        this.$route.path != "/studentHome/examInfo"
      ) {
        this.$router.push("/studentHome/examInfo");
      } else if (
        index == "myInfomation" &&
        this.$route.path != "/studentHome/myInfomation"
      ) {
        this.$router.push("/studentHome/myInfomation");
      } else if (
        index == "examDetails" &&
        this.$route.path != "/studentHome/examDetails"
      ) {
        this.$router.push("/studentHome/examDetails");
      }
    },
  },
  mounted() {
    //获取头像
    axios
      .get("v1/users/searchicon")
      .then((result) => {
        // console.log(result.data.data);
        this.src = `http://localhost:8081${result.data.data[0].url}`;
      })
      .catch((err) => {
        console.log(err);
      });

    //截取url做默认选中
    this.defaultActive = location.href.substring(
      location.href.lastIndexOf("/") + 1
    );
    // console.log(location.href.substring(location.href.lastIndexOf("/") + 1));
  },
};
</script>

<style lang="css">
.left-menu {
  position: absolute;
  width: 200px;
  top: 0;
  left: 0;
  bottom: 0;
  border-right: 1px solid #e9e9e9;
  overflow-y: auto;
  overflow-x: hidden;
}
.left-menu h2 {
  text-align: center;
}
.el-menu {
  border-right: none;
}

.right-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 700px;
  padding: 20px 20px 0;
  position: absolute;
  top: 0;
  left: 200px;
  right: 0;
  bottom: 0;
  overflow-y: auto;
}
.top-bar {
  border: 0;
  border-bottom: 1px solid #e8e8e8;
  -webkit-box-shadow: none;
  box-shadow: none;
  line-height: 46px;
}
.right-box .user-menu {
  cursor: pointer;
  padding: 0 20px;
}

.el-button--text {
  color: #000;
}

.el-button--text:hover {
  color: #000;
}
</style>
